<!-- 热力图分析 -->
<script setup>
import { reactive, onBeforeUnmount, toRefs } from 'vue';
import { ElMessage, ElOption, ElSelect } from 'element-plus';
import * as turf from '@turf/turf';
import BorderBoxBg from '@/components/BorderBoxBg.vue';
import { LAYERS_GROUP_ID } from '@/utils/map-helper';
import { MAP_ADD_HEAT_LAYER } from '@/utils/map-utils';
import { REMOVE_MAPBOX_LAYER } from '@/utils/map-utils';
import MapResultInfoQuery from './MapResultInfoQuery.vue';

const props = defineProps({
  toolbarRight: {
    type: String,
    default: '5.3125rem',
  },
});
const { toolbarRight } = toRefs(props);

const emit = defineEmits(['heatMapClose']);

const queryAttribute = reactive({
  show: false,
  info: {},
});
const query_value = reactive({
  label: '',
  points: [],
});

// 秦岭附近经纬度随机数测试数据
const generateData = (num) => {
  const data = [];

  var arrStr = [
    '大熊猫',
    '白鹤',
    '华南虎',
    '金丝猴',
    '扬子鳄',
    '豹虎',
    '朱鹮',
    '褐马鸡',
    '羚牛',
    '云豹',
    '丹顶鹤',
    '金钱豹',
    '林麝',
  ];

  var imageList = [
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
    'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
    'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
    'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
    'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
  ];

  for (let i = 0; i < num; i++) {
    const latitude = 34.2687236180793 + (Math.random() - 0.5) * 0.2;
    const longitude = 109.193849723193 + (Math.random() - 0.5) * 0.2;

    const point = turf.point([longitude, latitude], {
      mag: getRandomDecimal(0, 10),
      name: arrStr[Math.floor(Math.random() * arrStr.length)],
      image: imageList[Math.floor(Math.random() * imageList.length)],
      layerKey: '热力图分析',
    });

    data.push(point);
  }

  return data;
};

// 生成一个从0到10的随机小数
function getRandomDecimal(min, max) {
  return Math.random() * (max - min) + min;
}

const simulateData = [
  {
    name: '一级保护动物活动范围',
    points: generateData(122),
  },
  {
    name: '二级保护动物活动范围',
    points: generateData(30),
  },
  {
    name: '三级保护动物活动范围',
    points: generateData(40),
  },
];

const handleChangeOption = (e) => {
  query_value.label = e.name;
  query_value.points = e.points;
};

// 关闭弹窗 并清理数据
const handleClose = () => {
  clearLightDottedLayer();
  handleQueryClose();
  queryMapRest();

  emit('heatMapClose');
};

const handleBtnQuery = (type) => {
  if (type == 1) {
    clearLightDottedLayer();
    MAP_ADD_HEAT_LAYER(LAYERS_GROUP_ID.High_Light_RESULT_LAYER, query_value.points);
    getMapFeatures();
  } else {
    query_value.label = '';
    query_value.points = [];
    clearLightDottedLayer();
    handleQueryClose();
    queryMapRest();
  }
};

// 查询属性信息
const getMapFeatures = () => {
  const map = window.map2d;

  map.getCanvas().style.cursor = 'crosshair';
  // 解除绑定需要加绑定的函数，不然无法解绑
  map.off('click', mapCallBack);

  map.on('click', mapCallBack);
};

// 地图点击查询
const mapCallBack = (e) => {
  const map = window.map2d;
  const features = map.queryRenderedFeatures(e.point);

  if (features.length) {
    queryAttribute.show = true;
    queryAttribute.info = features;
  } else {
    ElMessage.warning('暂无信息');
    handleQueryClose();
  }
};

// 清除图层
const clearLightDottedLayer = () => {
  handleQueryClose();
  queryMapRest();

  const layerId = LAYERS_GROUP_ID.High_Light_RESULT_LAYER;

  REMOVE_MAPBOX_LAYER(`${layerId}~heat`);
  REMOVE_MAPBOX_LAYER(`${layerId}~point`);
  REMOVE_MAPBOX_LAYER(`${layerId}~symbol`);
};

const handleQueryClose = () => {
  queryAttribute.show = false;
  queryAttribute.info = {};
};

const queryMapRest = () => {
  const map = window.map2d;

  if (!map) return;

  map.getCanvas().style.cursor = 'pointer';
  map.off('click', mapCallBack);
};

onBeforeUnmount(() => {
  handleClose();
});
</script>
<template>
  <BorderBoxBg title="热力图分析" class="analysis" :right="toolbarRight" @close="handleClose">
    <div class="item">
      <p>选择分析对象</p>
      <ElSelect v-model="query_value.label" placeholder="请选择" @change="(e) => handleChangeOption(e)">
        <ElOption v-for="(item, index) in simulateData" :key="index" :label="item.name" :value="item" />
      </ElSelect>
    </div>

    <div class="btn_div">
      <div class="btn_select" @click="handleBtnQuery(1)">
        <p>分析</p>
      </div>
      <div class="btn_select" @click="handleBtnQuery(2)">
        <p>重置</p>
      </div>
    </div>

    <!-- 查询信息 -->
    <MapResultInfoQuery v-if="queryAttribute.show" :info="queryAttribute.info" @handle-query-close="handleQueryClose" />
  </BorderBoxBg>
</template>

<style scoped lang="scss">
.analysis {
  top: 60%;
  bottom: auto;
  .btn_div {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 5px;
    text-align: center;
    .btn_select {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 110px;
      height: 42px;
      margin-top: 21px;
      margin-bottom: 17px;
      font-size: 16px;
      font-family: Source Han Sans CN, Source Han Sans CN-Medium;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      p {
        margin: 0;
      }
      &:hover {
        background-color: #e6f5fe;
      }
      &:first-child {
        color: #33c7d4;
        background: rgba(25, 131, 145, 0.3);
      }
      &:nth-child(2) {
        color: #999999;
        background: rgba(153, 153, 153, 0.3);
      }
    }
  }
}
</style>
